<template>
  <static-container class="withdraw-trade">
    <static-container-body>
      <el-form v-model="filters" label-position="top" :inline="true" size="medium" flex>
        <el-form-item label="交易类型">
          <el-select v-model="filters.orderType">
            <el-option v-for="item in tradeType" :label="item.title" :key="item.value" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-select v-model="time">
            <el-option v-for="item in consts.TIME_PERIOD" :label="item.title" :key="item.value" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filters.status">
            <el-option v-for="item in tradeStatus" :label="item.title" :key="item.value" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="tableData.list" :loading="loading" element-loading-text="加载中..." :summary-method="getSummaries"
        show-summary wrapper-border border-radius>
        <el-table-column label="时间" align="center">
          <template slot-scope="{row}">
            {{row.createTime | toTime}}
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单号" align="center"></el-table-column>
        <el-table-column label="交易类型" align="center">
          <template slot-scope="{row}">
            {{row.orderDesc}}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="操作动作" align="center"></el-table-column>

        <el-table-column label="金额" align="center">
          <template slot-scope="{row}">
            {{row.amount | fix2yuan}}
          </template>
        </el-table-column>
        <el-table-column label="手续费" align="center" width="100px">
          <template slot-scope="{row}">
            {{row.fee | fix2yuan}}
          </template>
        </el-table-column>
        <el-table-column label="实际到账" align="center">
          <template slot-scope="{row}">
            {{row.reallyAmount | fix2yuan}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="{row}">
            <badge-text :value="row.status" dic="TRADE_STATUS"></badge-text>
          </template>
        </el-table-column>
        <template slot="empty">
          <div class="el-table__empty">
            <svg-icon class="el-table__empty-icon" icon-class="grid-empty-1"></svg-icon>
            <div class="el-table-text">暂无资金明细</div>
          </div>
        </template>
      </el-table>

      <div class="el-pagination-container">
        <el-pagination bordered @size-change="gridSizeChange" @current-change="gridCurrentChange"
          :current-page="filters.page" :page-size="filters.size" :total="tableData.total">
        </el-pagination>
        <el-warning>所有数据只保留最近60天，如若查询更多请联系在线客服</el-warning>
      </div>
    </static-container-body>
  </static-container>
</template>

<script>
  import {
    grid
  } from '@/build';
  import { userTransactionListApi as listApi  } from '@/services/api/user';

  export default {
    name: "withdraw-trade",

    mixins: [
      grid,
    ],

    data() {
      return {
        tableData: {},
        tradeStatus: _.filter(consts.TRADE_STATUS, (status) => status.value !== -3),
        time: consts.TODAY,
        filters: {
          date: undefined,
          orderType: consts.ALL,
          status: consts.ALL,
          page: 1,
          size: 10
        },
        tradeType: [...consts.TRADE_TYPE],

        statistic: [{
          index: 4,
          prop: 'tableData.amountTotal',
          format: (total) => {
            return (<div > {  _.currency(total) } </div>);
          }
        }],
      };
    },

    watch: {
      'filters.orderType': {
        handler(time) {
          this.getAll();
        },
      },
      'filters.status': {
        handler(time) {
          this.getAll();
        },
      }
    },
    
    computed:{
      ...mapState({
        user: state => state.user
      }),
    },
    
    created(){
      if(this.user.rechargeSwitch){
        this.tradeType.splice(1,0,{
          title: '充值',
          value: 1,
        });
      }
    },

    mounted() {
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        // beforeSend: (data) => {
        //   if(data.orderType === -1){
        //     data.orderType = this.user.rechargeSwitch ? '1,2,4,9,6,10' : '2,4,9,6,10';
        //   }
        //   return data;
        // },
        format: (data) => {
          return data;
        }
      });
    },
  };
</script>

<style lang="scss">
  @include b(withdraw-trade) {
    @include main-center(800px);
  }
</style>